'use client'

import React, { ReactNode } from 'react'
import { StyleProvider, extractStyle, createCache } from '@ant-design/cssinjs'
import { useServerInsertedHTML } from 'next/navigation'

interface Props {
  children: ReactNode
}

export default function AntdStyleProvider({ children }: Props): JSX.Element {
  const cache = createCache()

  useServerInsertedHTML(() => {
    const styleText = extractStyle(cache)
    return <style id="antd" dangerouslySetInnerHTML={{ __html: styleText }} />
  })

  return <StyleProvider cache={cache}>{children}</StyleProvider>
}
